import React from 'react';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools, SearchBar, Avatar, Icon, Modal,Result } from 'weaver-mobile';
import { ListViewPage } from 'weaver-mobile-page';
import HisBlogRoute from '../hisBlog/HisBlogRoute';

import NewAttentionTool from "../public/NewAttentionTool";
import { renderNoData } from '../public/BlogUtils';
const getLabel = Tools.getLabel;
const alert = Modal.alert;

@withRouter
@inject('userCenterStore')
@observer
export default class MyFans extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-center-myFans'
  }

  constructor(props) {
    super(props);
    this.state={
      path: props.parentPath + "/hisBlog/",
      userId: '',
    }
    this.updateUserAttentionStatus = this.updateUserAttentionStatus.bind(this);
  }

  componentDidMount() {
    const { userCenterStore: { myFansStore } } = this.props;
    myFansStore.getMyFansList();
  }

  componentWillUnmount() {
    const { userCenterStore: { myFansStore } } = this.props;
    myFansStore.myFansClear();
  }

  updateUserAttentionStatus(attnInfo) {
    const { userCenterStore: { myFansStore } } = this.props;
    myFansStore.updateFansAttentionStatus(attnInfo)
  }

  attentionTool = (data) => {
    let { islower, userId, attentionMeStatus, isreceive ,specialStatus} = data;
    const { userCenterStore: { myFansStore } } = this.props;
    const { attentionMeOpt } = myFansStore;
    let text,type,className = 'text-info active';
    let func = (event) => {
      event.stopPropagation(); // 阻止事件冒泡
      if(attentionMeStatus === '4') {
        alert(getLabel(390696, '取消关注后需要重新申请才能再次关注'),getLabel(129256, '确定要取消吗？'),[
          {text: getLabel(31129, '取消')},
          {text: getLabel(33703, '确认'), onPress: () => {
            attentionMeOpt({attentionMeStatus, islower, userId}, this.updateUserAttentionStatus)
          }}
        ])
      } else {
        attentionMeOpt({attentionMeStatus, islower, userId}, this.updateUserAttentionStatus)
      }
    }
      if(attentionMeStatus=='1'||attentionMeStatus=='2'){
        return "";
      }

      if(specialStatus=='2'){
          attentionMeStatus='5';
      }
    switch(attentionMeStatus) {
      case '3': text=getLabel(18659,'已申请');type='blog-yiguanzhu';className='text-info';break;
      case '4': text=getLabel(390725,'互相关注');type='blog-huxiangguanzhu';className='text-info';break;
      case '5': text=getLabel(514285,'特别关注') ;type='special-concern-1' ;className='text-info';break;
      default: break;
    }



    return (
      (isreceive === '0' && attentionMeStatus === '2') ? <span />
			: <div className={className}><Icon type={type} size='xxs'/><span>{text}</span></div>
    )
  }
    goToUser = (userid) => {
        this.setState({ userId: userid }, () => {
            this.props.history.push(this.state.path + userid);
        });
    }

  getTemplate = () => {
    const listStyle = 'blog-list-line';
      const { userCenterStore: { myFansStore } } = this.props;
      const { attentionMeOpt } = myFansStore;
      const ddd=this.goToUser;
    const newTemp = {
      default: [{
        key: 'col_1',
        render: (data) => {
          const { imageUrl, lastname, departmentName, jobtitle ,islower, userId, attentionMeStatus, isreceive,specialStatus} = data;
          return (
            <div className={listStyle}>
              <div className={`${listStyle}-userInfo`} onClick={() => {
                  ddd(userId);
              }}>
                <Avatar userId={userId} />
                <div className={`${listStyle}-userInfo-content`}>
                  <span className='lastName text-wrap'>{lastname}</span>
                  <span className='departmentName text-wrap'>{departmentName}&nbsp;{jobtitle}</span>
                </div>
              </div>
              <div className={`${listStyle}-ops`}>{ this.attentionTool(data) }</div>
                <NewAttentionTool
                    isreceive={isreceive}
                    attentionStatus={attentionMeStatus}
                    specialStatus={specialStatus}
                    userId={userId}
                    islower={islower}
                    attentionMeOpt={attentionMeOpt}
                    callback={this.updateUserAttentionStatus}
                    type='myfans'
                />
            </div>
          )
        }
      }]
    }
    return newTemp;
  }

  render() {
    const { prefixCls, userCenterStore: { myFansStore } } = this.props;
    const { myFansList, getMyFansList, myFansSearch, myFansNoData } = myFansStore;
    
    return (
      <div className={prefixCls}>
          <div style={{"background-color":"rgb(113, 113, 113)","color":"rgb(255, 255, 255)","height":"25px","display":"flex","justify-content":"center","align-items":"center"}}>{getLabel(387981,'我的粉丝')}</div>
        <SearchBar
          placeholder = {getLabel(500351,'请输入关键字')} 
          onSubmit={myFansSearch}
        />
        {
          myFansNoData ?  
          <div className='blog-noData'>
            <Result
              img={<Icon type="no-data" />}
              message={getLabel(83553, '暂无数据')}
            />
        </div> : (
            <ListViewPage.Normal
              store={myFansList}
              getDataCustom
              getTemplate={this.getTemplate}
              customHeight='100%'
              rowKey='userId'
              onRefresh={getMyFansList}
           />
          )
        }
        <HisBlogRoute path={this.state.path} userId={this.state.userId}/>
      </div>
    )
  }
}